import React from 'react';
import {NavLink} from 'react-router-dom'
import './widget.css';

class LeftNavigator extends React.Component {

    constructor(props) {
        super(props);

        if (!props.routerConfig) {
            console.error('没有为路由器配置属性！')
        }

        this.lis = props.routerConfig.map((item, i) => {
            // var childLis = {};
            if(item.items){
                // 最多支持两层，不是递归方法
                var items = item.items.map((childItem, i2) => {
                    return (
                        <NavLink to={childItem.path}>{childItem.name}<div className='left-foucs'></div>
                        </NavLink>
                    )   
                })
                return (
                    <div key={i.toString()}>
                        <NavLink to={item.path}>{item.name}<div className='left-foucs'></div>
                        </NavLink>
                        <div className='child-navigator'>
                            {items}
                        </div>
                    </div>
                )
            }else{
                return (
                    <div key={i.toString()}><NavLink to={item.path}>{item.name}<div className='left-foucs'></div></NavLink></div>
                )
            }
            
        })
    }

    render() {
        return (
            <div className="left-navigation" ref='navigation'>
                {this.lis}
            </div>
        )
    }

}

export default LeftNavigator;